<template>
  <a-table :columns="columns" :data-source="data" bordered :customRow="Rowclick">
    <template slot="name" slot-scope="text">
      <a>{{ text }}</a>
    </template>
    <template slot="title" slot-scope="currentPageData">
      Header
    </template>
    <template slot="footer" slot-scope="currentPageData">
      Footer
    </template>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money'
  },
  {
    title: 'Address',
    dataIndex: 'address'
  }
]

const data = [
  {
    key: '1',
    name: '张飞',
    money: '1',
    address: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    name: '李逵',
    money: '2',
    address: 'London No. 1 Lake Park'
  },
  {
    key: '3',
    name: '林冲',
    money: '3',
    address: 'Sidney No. 1 Lake Park'
  }
]

export default {
  data() {
    return {
      data,
      columns
    }
  },
  methods: {
    Rowclick(record, index) {
      return {
        on: {
          click: () => {
            console.log(record.money)
            this.$router.push({
              path: '/',
              query: {
                id: record.money
              }
            })
          }
        }
      }
    }
  }
}
</script>
<style>
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>
